<template>
    <div id="changeWord" class="changeWord">
        <div class="top-header-bg">
            <div class="bg-header"></div>
            <div class="login-name">密码修改</div>
            <div class="img-login"></div>
        </div>
             <div class="main-login" v-show="isShow==1">
                <input type="text" id="username" name="username" placeholder="请填写账号" maxlength="11" size="11" v-model="username" autocomplete="off">
                <div class="sub-btn">
                    <button class="login-btn" @click="confirmUsername">下一步</button>
                <button @click="onCancle">取消</button>
            </div>
            </div>
            <div class="main-login" v-show="isShow==2">
                <input type="text" id="email" name="email" placeholder="请填写邮箱" maxlength="30" size="30" v-model="email" autocomplete="off">
                <div class="comfirm">
                    <input type="text" id="code" name="code" placeholder="请输入邮箱验证码" maxlength="30" size="30" v-model="code" autocomplete="off">
                    <button class="getCode-btn" @click="sendCode">发送验证码</button>
                </div>
            <div class="sub-btn">
                <button class="login-btn" @click="onConfirm">下一步</button>
                <button @click="onCancle">上一步</button>
            </div>
        </div>
        <div class="main-login" v-show="isShow==3">
            <input type="text" id="username" name="username" placeholder="请填写账号" maxlength="11" size="11" v-model="username" autocomplete="off">
            <input type="password" id="password" name="password" placeholder="密码不少于6位" maxlength="16" size="16" v-model="password">
            <input type="password" id="password2" name="password2" placeholder="确认密码" maxlength="16" size="16" v-model="password2">
            <div class="sub-btn">
                <button @click="change">确认修改密码</button>
                <button @click="onCancle">上一步</button>
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';;
export default {
    data() {
        return {
            isShow:1,
            username: '',
            password: '',
            password2: '',
            email: '',  //邮箱
            code: '',  //验证码
            EmailCode:'' //后端请求的验证码
        };
    },
    methods: {
        isUsername(str){
            // 4到16位（字母，数字，下划线，减号）
            let reg=/^[a-zA-Z0-9_-]{4,16}$/;
	        return reg.test(str);
        },
        IsEmail(str) {
	     let reg=/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	     return reg.test(str);
        },
        // 密码：6-15位 大小写字母、数字
        IsPassword(pw1,pw2){
	        let reg=/^[a-zA-Z0-9]{6,15}$/;
	        return (reg.test(pw1)&&reg.test(pw2)&&(pw1==pw2));
        },
        // 验证账号
        confirmUsername(){
            if(!this.username){
                Toast('输入框不能为空！！！');
            }else if(!this.isUsername(this.username)){
                Toast('账号填写错误或不规范');
            }else {
                let params = {
                    username: this.username,
                };
                this.$http.post('/confirmUsername',params).then( res=>{
                    if(res.data.errcode === 200){
                        this.isShow = 2;
                    }else{
                        Toast('用户不存在!!!');
                    }
                })
            }
        },
        // 取消修改密码
        onCancle(){
            this.$router.go(-1)
        },
        // 点击发送邮箱验证码
        sendCode() {
            if(!this.email){
                Toast('输入框不能为空！！！');
            }else if(!this.IsEmail(this.email)){
                Toast('邮箱名称填写错误或不规范');
            }else{
                console.log(1)
                let params = {
                    username: this.username,
                    password: this.password,
                };
                //验证账号是否对应邮箱，才能发送验证码
                this.$http.post('/confirmEmail',params).then( res =>{
                    if(res.data.errcode === 200){
                        this.$http.get("/email", { 
                            params:{
                                email: this.email
                            }
                        }).then((res) => {
                            if(res.data.code === 0){
                                this.EmailCode = res.data.message;
                            }else{
                                Toast('验证码发送失败！！！')
                            }
                        });
                    }else{
                        Toast('邮箱不匹配！！！')
                    }
                });
            }
        },
        // 验证验证码,同时：不能不点击发送邮箱验证码就进入下一页面修改密码
        onConfirm(){
            if(!this.email ||  !this.code){
                Toast('输入框不能为空！！！');
            }else if(!this.IsEmail(this.email)){
                Toast('邮箱名称填写错误或不规范');
                // 不能不写
            }else if(!this.EmailCode || this.EmailCode !== this.code){
                Toast('验证码填写错误！！！');
            }else{
                // 验证码正确，可以修改密码
                this.isShow = 3;
            }
        },
        // 点击确认修改密码
        change() {
            if(!this.username || !this.password || !this.password2){
                Toast('用户名和密码不能为空！！！');
            }else if(!this.isUsername(this.username)){
                Toast('账号填写错误或不规范');
            }else if(!this.IsPassword(this.password,this.password2)){
                Toast('两个密码必须相同且不能为空');
            }else{
                // 修改密码
                let params = {
                    username: this.username,
                    password: this.password,
                };
                this.$http.post('/changeWord',params).then( res =>{
                    if(res.data.errcode === 200){
                        Toast('修改成功！！！');
                        this.$router.push({
                            path:'/login',
                            query:this.username
                        })
                    }else{
                        Toast('修改失败！！！');
                    }
                })
            }
        },
    },
}
</script>

<style lang="less" scoped>
    @mainColor: #20a2ed;
.changeWord{
    background: #fff;
    height: 100vh;
    .top-header-bg {
        margin-bottom: 10px;
        position: relative;
        width: 100%;
        height: 140px;
        overflow: hidden;
        .img-login {
            margin: auto;
            position: absolute;
            left: 0;
            top: 20px;
            right: 0;
            width: 78px;
            height: 78px;
            background: url(../assets/img/login/Logo.png) no-repeat;
            background-size: 100% 100%;
        }
        .login-name {
            margin-top: 110px;
            font-size: 23px;
            text-align: center;
        }
        .bg-header {
            position: absolute;
            left: -50%;
            top: -100%;
            width: 200%;
            height: 200%;
            background: url(../assets/img/login/loginBg.png) no-repeat;
            background-size: 100% 100%;
        }
    }
    .comfirm{
            display: flex;
            .getCode-btn{
                    width: 30%;
                    height: 45px;
                    border-radius: 20px;
                    background-color: #00B2E2;
                    color: #fff;
            }
        }
    .main-login {
        width: 90%;
        padding: 15px 20px;
        margin: 0 auto;
        input {
            width: 100%;
            height: 40px;
            border-radius: 20px;
            font-size: 16px;
            line-height: 40px;
            text-align: center;
        }
        .sub-btn{
            display: flex;
            width: 100%;
            button{
                font-size: 16px;
                width: 100%;
                height: 45px;
                border-radius: 20px;
                background-color: #ccc;
                color: #fff;
            }
            button:first-child{
                background-color: #00B2E2;
            }
        }
        .sub-link{
            margin-top: 20px;
            color: #00B6E8;
            font-size: 15px;
            text-align: right;
        }
    }
}
    
</style>
